<!-- 商铺：展品列表 -->
<template>
  <div class="prod">
    <div class="wCen">
      <div class="titlePage">
        <span class="titlePage_l">{{ $t("exhibitor.detail.product") }}</span>
        <span class="titlePage_r" v-if="localeCn">PRODUCTS</span>
      </div>
      <div class="main" v-if="list && list.length > 0">
        <div class="list">
          <section class="swiper-container swiper-product">
            <article class="swiper-wrapper">
              <div class="swiper-slide hand" v-for="(item, index) in list" :key="index" @click="go2ProductDetail(item)">
                <div class="imgBox">
                  <img :src="splitFirst(item.photoUrls)" alt="" class="img" v-if="item.photoUrls" />
                  <img :src="defaultLogo" alt="" class="img" v-else />
                </div>
                <div class="bottom">
                  <p class="txt text_e-1">{{ localeCn?item.productName:item.productNameEn||item.productName }}</p>
                </div>
              </div>
            </article>
          </section>
          <!-- 按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
        <p class="tipProduct">{{ $t("exhibitor.detail.welcome") }}</p>
      </div>
      <common-no-data v-else :text="$t('noData')"></common-no-data>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/product";
export default {
  name: "exhibitor-product",
  computed: {
    companyInfo() {
				return this.$store.state.seo.pageContent;
    },
    // 展商id
    eid() { 
      return this.companyInfo.exhibitorId
    },
    slidesPerView() {
      if (this.isMobile) {
        return 2;
      } else {
        return 4;
      }
    },
  },
  data() {
    return {
      list: [],
      form: {
        pageNum: 1,
        pageSize: 100,
        exhibitorId: "",
        orderByColumn: "t1.sortOrder",
        isAsc: "asc",
      },
    };
  },
  mounted() {
    this.getListFun();
  },
  methods: {
    initSwiper() {
      const slidesPerColumn = 2;
      let product = new Swiper(".swiper-product", {
        slidesPerView: this.slidesPerView,
        slidesPerColumn: slidesPerColumn,
        slidesPerGroup: this.slidesPerView * slidesPerColumn,
        slidesPerColumnFill: "row",
        spaceBetween: 30,
        nextButton: ".swiper-button-next",
        prevButton: ".swiper-button-prev",
        autoplay: 5000,
        // loop: true,
        paginationClickable: true,
        pagination: ".swiper-pagination",
        autoplayDisableOnInteraction: false, //手动播放后继续自动播放
      });
    },
    getListFun() {
      this.form.exhibitorId = this.eid;
      this.invoke(getList, this.form).then((res) => {
        if (res && res.code == 200) {
          this.list = res.rows;
          this.$nextTick(() => {
            this.initSwiper();
          });
          // 向上传送数据
          this.$emit('uploadProduct',this.list)
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.prod {
  padding-bottom: 150px;
  background-color: #fff;

  .list {
    position: relative;

    .swiper-slide {
      overflow: hidden;
      border: 1px solid #f1f1f1;
      background-color: #fff;


      .imgBox {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 160px;
        overflow: hidden;
        border-radius: 4px;

        .img {
          max-width: 100%;
          max-height: 100%;
        }
      }

      .bottom {
        height: 70px;
        font-size: 18px;
        color: #191e33;
        display: flex;
        justify-content: center;
        align-items: center;
        padding:0 20px;
      }
    }

    .swiper-container {
      width: 100%;
      padding-top: 80px;
      :deep(.swiper-pagination) {
        bottom: 0px;
      }
    }

    :deep(.swiper-button-next),
    :deep(.swiper-container-rtl .swiper-button-prev),
    :deep(.swiper-button-prev),
    :deep(.swiper-container-rtl .swiper-button-next) {
      background-image: url("@/assets/img/icon_next_grey.png");
      $w: 42px;
      width: $w;
      height: $w;
      background-size: $w $w;
      transform: rotate(180deg);
    }
	
	:deep(.swiper-button-next){
		top: 0;
		right: 20px;
	}
	:deep(.swiper-button-prev){
		top: 0;
		right: 90px;
		left: auto;
	}
	
    :deep(.swiper-button-next),
    :deep(.swiper-container-rtl .swiper-button-prev) {
      background-image: url("@/assets/img/icon_next_grey.png") !important;
      transform: rotate(0deg);
    }
	:deep(.swiper-button-prev.swiper-button-disabled){
		background-image: url("@/assets/img/icon_next.png") !important;
		 transform: rotate(0deg);
		
	}
	:deep(.swiper-button-next.swiper-button-disabled){
		 background-image: url("@/assets/img/icon_next.png") !important;
		 transform: rotate(180deg);
	}
  }
  // 最下面的提示信息
  .tipProduct {
      font-size: 20px;
      margin-top: 70px;
      color: #4f4f4f;
  }
}

@media (min-width: 1441px) and (max-width: 1750px) {
		@function scale($currentSize) {
			@return calc(#{$currentSize} * #{$global_scale_1600});
		}
		.prod {
		  padding-bottom: scale(150px);
		
		  .list {
		    .swiper-slide {
		      .imgBox {
		        height: scale(160px);
		     
		      }
		
		      .bottom {
		        height: scale(70px);
		        font-size: scale(18px);
		        padding:0 scale(20px);
		      }
		    }
		
		    .swiper-container {
		      padding-top: scale(80px);
		    
		    }
		
		    :deep(.swiper-button-next),
		    :deep(.swiper-container-rtl .swiper-button-prev),
		    :deep(.swiper-button-prev),
		    :deep(.swiper-container-rtl .swiper-button-next) {
		      $w: scale(42px);
		      width: $w;
		      height: $w;
		      background-size: $w $w;
		    
		    }
			
			:deep(.swiper-button-next){
	
				right: scale(20px);
			}
			:deep(.swiper-button-prev){
	
				right: scale(90px);
			
			}
			
		   
			
		  }
		  // 最下面的提示信息
		  .tipProduct {
		      font-size: scale(20px);
		      margin-top: scale(70px);
		  }
		}
	

	}

	@media screen and (min-width: 1100px) and (max-width: 1440px) {
		@function scale($currentSize) {
			@return calc(#{$currentSize} * #{$global_scale_1600});
		}
		.prod {
		  padding-bottom: scale(150px);
		
		  .list {
		    .swiper-slide {
		      .imgBox {
		        height: scale(160px);
		     
		      }
		
		      .bottom {
		        height: scale(70px);
		        font-size: scale(18px);
		        padding:0 scale(20px);
		      }
		    }
		
		    .swiper-container {
		      padding-top: scale(80px);
		    
		    }
		
		    :deep(.swiper-button-next),
		    :deep(.swiper-container-rtl .swiper-button-prev),
		    :deep(.swiper-button-prev),
		    :deep(.swiper-container-rtl .swiper-button-next) {
		      $w: scale(42px);
		      width: $w;
		      height: $w;
		      background-size: $w $w;
		    
		    }
			
			:deep(.swiper-button-next){
			
				right: scale(20px);
			}
			:deep(.swiper-button-prev){
			
				right: scale(90px);
			
			}
		  }
		  // 最下面的提示信息
		  .tipProduct {
		      font-size: scale(20px);
		      margin-top: scale(70px);
		  }
		}
			
		

	}

	@media (max-width: 767px) {
		@function scale($currentSize) {
			@return calc(#{$currentSize} * #{$global_scale_750});
		}
		.prod {
		  padding-bottom: scale(150px);
		
		  .list {
		    .swiper-slide {
		      .imgBox {
		        height: scale(160px);
		     
		      }
		
		      .bottom {
		        height: scale(70px);
		        font-size: scale(18px);
		        padding:0 scale(20px);
		      }
		    }
		
		    .swiper-container {
		      padding-top: scale(30px);
		    
		    }
		
		    :deep(.swiper-button-next),
		    :deep(.swiper-container-rtl .swiper-button-prev),
		    :deep(.swiper-button-prev),
		    :deep(.swiper-container-rtl .swiper-button-next) {
		      $w: scale(50px);
		      width: $w;
		      height: $w;
		      background-size: $w $w;
		    
		    }
			
			:deep(.swiper-button-next){
			
				right: scale(20px);
			}
			:deep(.swiper-button-prev){
			
				right: scale(90px);
			
			}
		  }
		  // 最下面的提示信息
		  .tipProduct {
		      font-size: scale(20px);
		      margin-top: scale(70px);
		  }
		}
		}


</style>

